<template>
  <div>
    <el-tabs type="card"
    >
      <el-tab-pane label="风采列表">
        <nav-btn :sheet-header="xlsxHeader"
                 :sheet-list="_list"
                 xlsx-name="风采列表"
                 @search-method="handleGetSearchActivity"
        />
        <el-table :data="xlsxSheet"
                  max-height="680"
                  style="width: 100%"
                  border
                  lazy
                  row-key="activitycontentId"
                  :load="handleGetComment"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

        >
          <el-table-column
              label="序号"
              type="index"
              width="80"
              sortable
          />
          <el-table-column
              v-for="(item ,index) in settings"
              :prop="index"
              :label="item"
              :key="item"
              v-if="index!=='activitycontentStatus'"
              sortable
          />

          <el-table-column class="article-title" sortable label="风采状态">
            <template slot-scope="scope">
              <span v-show="isComment(scope.row.activitycontentId)">{{
                  scope.row.activitycontentStatus | auditStatus
                }}</span>
              <span v-show="!isComment(scope.row.activitycontentId)">{{ scope.row.activitycontentStatus }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                  slot="reference"
                  size="mini"
                  style="margin-right: 10px"
                  type="primary"
                  plain
                  v-show="isComment(scope.row.activitycontentId)"
                  @click="handleGetArticle(scope.row.activitycontentId)"
              >详情
              </el-button>
              <el-button
                  slot="reference"
                  size="mini"
                  style="margin-right: 10px"

                  type="danger"
                  plain
                  @click="handleDelArticle(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
        :visible.sync="articleContentshow">
      <el-link slot="title">
        <span>{{ "文章名称:" + content.activitycontentTitle }}</span>
        <span v-text="content ? content.activitycontentDatetime : ''"></span>
      </el-link>
      <el-card>
        <div v-html="content ? content.activitycontentDisc : ''"></div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import NavBtn from "@/components/navBtn";

export default {
  components: { NavBtn },
  data () {
    return {
      list: [],
      currentPage: 1,
      currentPageSize: 10,
      total: 0,
      keyword: "",
      dataRange: null,
      content: "",
      articleContentshow: false,
      settings: {
        "activitycontentTitle": "风采标题",
        "activitycontentDatetime": "发布时间",
        "activitycontentStatus": "风采状态",
      },
      isComment (val) {

        return Object.prototype.toString.call(val) !== "[object String]";
      },
    };
  },

  computed: {

    xlsxSheet () {
      const list = this.list;
      let _list = [];
      _list = list.map(value => {
        return {
          "activitycontentId": value.activitycontentId,
          "activitycontentTitle": value.activitycontentTitle,
          "activitycontentDatetime": value.activitycontentDatetime,
          "activitycontentStatus": value.activitycontentStatus,
          "hasChildren": true,

        };
      });

      return _list;
    },
    xlsxHeader () {
      const { settings } = this;
      return Object.values(settings);
    },
    _list () {
      const { xlsxSheet } = this;
      let _list = xlsxSheet.map(value => {
        return [Object.values(value)];
      });
      return _list.flat(1);
    },
  },
  mounted () {
    this.handleGetByNumActivity(1);
  },
  methods: {
    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetActivityContent();
    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetActivityContent();
    },
    async handleGetActivityContent () {
      const res = await this.$http.activityContentGet({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      if (res.code !== 0) return null;
      this.list = res.data.list;
      this.total = res.data.totalCount;
    },

    async handleDelArticle (info) {
      const id = info.activitycontentId;

      if (Object.prototype.toString.call(id) === "[object String]") {
        let idExg = /\d+/;

        // console.log(`id.match(idExg)-->`, id.match(idExg));
        const commentId = id.match(idExg)[0];

        const res = await this.$http.commentDel(
            ~~commentId,
        );
        if (res.code !== 0) return null;
        return this.$router.go(0);

      }

      await this.$http.activityContentDel(info.activitycontentId);

      return this.handleGetByNumActivity(1);

    },

    async handleGetArticle (e) {
      this.articleContentshow = true;
      const res = await this.$http.activityContentGetInfo(e);
      if (res.code !== 0) return null;
      this.content = res.data;
    },
    handleGetSearchActivity (info) {
      let {
        content,
        dataRange,
      } = info;

      return this.searchByBoth(content, dataRange);

    },
    async searchByBoth (content, dataRange) {
      //  后端接口

      const res = await this.$http.activityContentAllBySearch(
          {
            from: dataRange ? dataRange[0] ?? "" : "",
            keywords: content ?? "",
            pageNum: this.currentPage ?? "",
            pageSize: this.currentPageSize ?? "",
            to: dataRange ? dataRange[1] ?? "" : "",
          },
      );
      if (res.code !== 0) return null;

      this.list = res.data.list;
      this.total = res.data.totalCount;

    },
    async handleGetComment (tree, treeNode, resolve) {
      console.log(`tree, treeNode, -->`, tree, treeNode);
      let {
        activitycontentId,
      } = tree;
      let params = {
        id: activitycontentId,
        pageNum: 1,
        pageSize: 999,
      };
      //获取当前文章的风采
      const res = await this.$http.commentActivityContent(params);
      console.log(`res-->`, res);
      if (res.code !== 0) return this.$message.warning("出错啦");
      const _list = res.data.list;
      const comment = _list.map(val => {
        console.log(`val-->`, val);
        return {
          activitycontentId: "评论ID：" + val.commentId,
          commentId: val.commentId ?? "",
          activitycontentTitle: "评论内容：" + val.commentContent,
          activitycontentDatetime: "评论时间：" + val.commentDatetime,
          activitycontentStatus: "评论人：" + val.volunteerEntity?.volunteerName,
        };
      });

      resolve(comment);

    },
  },
};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}

.article-title:hover {
  cursor: pointer;
  color: deepskyblue;
}
</style>
